<template>
	<view>
		<ttBar leftIcon="icon-back" :title="memberInfo.id ? '修改学员' : '添加学员'">
			<!-- <template v-slot:rightCnt >
				<view class="rgt" @tap="remove" v-if="memberInfo.id">
					<text class="rt">删除</text>
				</view>
			</template> -->
		</ttBar>
		<view class="infoBox">
			<view class="row">
				<text class="label">学员昵称</text>
				<input type="text" placeholder="请输入学员姓名" v-model="memberInfo.name" />
			</view>
			<view class="row">
				<text class="label">生日</text>
				<input type="text" placeholder="请输入学员生日" v-model="memberInfo.birthday" @tap="showDate" disabled="disabled" />
			</view>
			<view class="row">
				<text class="label">性别</text>
				<view class="valueBox">
					<view class="item" @tap="changeSex(1)">
						<text class="iconfont" :class="[memberInfo.sex == 1 ? 'icon-danxuanfill' : 'icon-yuanxingweixuanzhong']"></text>
						<text>男</text>
					</view>
					<view class="item" @tap="changeSex(2)">
						<text class="iconfont " :class="[memberInfo.sex == 2 ? 'icon-danxuanfill' : 'icon-yuanxingweixuanzhong']"></text>
						<text>女</text>
					</view>
				</view>
			</view>
			<view class="row">
				<text class="label">手机号</text>
				<input type="number" placeholder="请输入手机号" v-model="memberInfo.phone" />
			</view>
			<view class="row row2" id="row2" v-show="showRow">
				<text class="label">与您关系</text>
				<view class="valueBox">
					<view class="item" @tap="changeType(1)">
						<text class="iconfont" :class="[memberInfo.type == 1 ? 'icon-danxuanfill' : 'icon-yuanxingweixuanzhong']"></text>
						<text>子女</text>
					</view>
					<view class="item" @tap="changeType(2)">
						<text class="iconfont" :class="[memberInfo.type == 2 ? 'icon-danxuanfill' : 'icon-yuanxingweixuanzhong']"></text>
						<text>父母</text>
					</view>
					<view class="item" @tap="changeType(3)">
						<text class="iconfont" :class="[memberInfo.type == 3 ? 'icon-danxuanfill' : 'icon-yuanxingweixuanzhong']"></text>
						<text>配偶</text>
					</view>
					<view class="item" @tap="changeType(4)">
						<text class="iconfont" :class="[memberInfo.type == 4 ? 'icon-danxuanfill' : 'icon-yuanxingweixuanzhong']"></text>
						<text>其他</text>
					</view>
				</view>
			</view>
			<view class="row " @tap="changeDefault">
				<text class="label label2">设为默认学员</text>
				<!-- icon-yuanxingweixuanzhong -->
				<text class="iconfont" :class="[memberInfo.used == 1 ? 'icon-yuanxingxuanzhongfill' : 'icon-yuanxingweixuanzhong']"></text>
			</view>
		</view>
		<view class="btnOp"><button @tap="save" :disabled="isDis">保存</button></view>
		<w-picker
			mode="date"
			startYear="1990"
			:endYear="yearNow"
			:defaultVal="nyr"
			:current="false"
			@confirm="selectNYR"
			:disabledAfter="false"
			ref="date"
			themeColor="#f00"
		></w-picker>
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
import wPicker from '@/components/w-picker/w-picker.vue';
export default {
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			isLogin: state => state.user.isLogin
		})
	},
	components: {
		wPicker
	},
	data() {
		return {
			memberInfo: {
				userId: 0,
				id: 0,
				name: '',
				sex: 1,
				type: 1,
				phone: '',
				used: 0,
				birthday: ''
			},
			isEdit: false,
			nyr: [],
			yearNow: '',
			isDis: false,
			showRow:true
		};
	},
	methods: {
		changeSex(e) {
			e = parseInt(e);
			this.memberInfo.sex = e;
		},
		changeType(e) {
			e = parseInt(e);
			this.memberInfo.type = e;
		},
		changeDefault() {
			if (this.memberInfo.used == 1) {
				this.memberInfo.used = 0;
			} else {
				this.memberInfo.used = 1;
			}
		},
		save() {
			let rgx = /^1[3456789]\d{9}$/;
			if (!this.memberInfo.name) {
				uni.showToast({
					title: '学员昵称不能为空',
					icon: 'none'
				});
			} else if (!this.memberInfo.phone) {
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
			} else if (!rgx.test(this.memberInfo.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
			} else {
				this.isDis = true;
				if (this.isEdit) {
					//修改
					let _data = this.memberInfo;
					this.$store.dispatch('apiEditMember', _data).then(res => {
						uni.showToast({
							title: '修改学员成功',
							icon: 'none'
						});
						uni.$emit('shuaxin');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					});
				} else {
					//新增
					let _data = this.memberInfo;
					delete _data.id;
					this.$store.dispatch('apiAddMember', _data).then(res => {
						uni.showToast({
							title: '添加学员成功',
							icon: 'none'
						});
						uni.$emit('shuaxin');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					});
				}
			}
		},
		remove() {},
		showDate() {
			this.$refs.date.show();
		},
		selectNYR(e) {
			console.log(e);
			this.nyr = e.checkArr;
			this.memberInfo.birthday = e.result;
		}
		
	},
	onLoad(cfm) {
		if (cfm.id) {	
			var nickname = this.userInfo.nickname;
			var cfmName = cfm.name;
			// 当登录人的昵称和客户名字一样时,默认为是本人不显示与您的关系
			if (nickname==cfmName) {
				this.showRow = false
			}
			//修改
			this.isEdit = true;
			this.memberInfo = cfm;
			delete this.memberInfo.url;
			this.memberInfo.id = parseInt(cfm.id);
			this.memberInfo.age = parseInt(cfm.age);
			this.memberInfo.sex = parseInt(cfm.sex);
			this.memberInfo.type = parseInt(cfm.type);
			this.memberInfo.userId = this.userInfo.userId;
			this.nyr = this.memberInfo.birthday.split('-');
			this.yearNow = new Date().pattern('yyyy-MM-dd').split('-')[0];
			
			
		} else {
			//新增
			this.memberInfo.userId = this.userInfo.userId;
			this.memberInfo.birthday = new Date().pattern('yyyy-MM-dd');
			this.nyr = this.memberInfo.birthday.split('-');
			this.yearNow = this.nyr[0];
			delete this.memberInfo.url;
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #f6f6f6;
}

.rgt {
	display: flex;
	align-items: center;
	margin-right: -10upx;
}

.rt {
	font-size: 28upx;
	color: #ffbf13;
}

.icon-add {
	font-size: 36upx;
	color: #ffbf13;
}

.infoBox {
	display: flex;
	flex-direction: column;
	padding-top: 18upx;
	.row2 {
		border-top: 5px solid #f6f6f6;
	}
	.row {
		background-color: #ffffff;
		display: flex;
		align-items: center;
		padding: 50upx 30upx;
		border-bottom: 1px solid #e7e7e7;
		.iconfont {
			font-size: 40upx;
		}
		.label {
			font-size: 32rpx;
			color: #202932;
			display: block;
			width: 160upx;
			flex-shrink: 0;
		}
		.label2 {
			flex: 1;
		}
		.valueBox {
			display: flex;
			align-items: center;
			flex: 1;
		}
		input {
			font-size: 32upx;
			flex-grow: 1;
		}
		.item {
			width: 25%;
			display: flex;
			align-items: center;
			.iconfont {
				font-size: 36upx;
				margin-right: 10upx;
			}
			text {
				font-size: 32upx;
			}
		}
	}
}
.icon-danxuanfill,
.icon-yuanxingxuanzhongfill {
	color: #ffc90f;
}
.icon-yuanxingweixuanzhong {
	color: #e7e7e7;
}
.btnOp {
	position: fixed;
	width: 100%;
	height: 88upx;
	bottom: 45upx;
	left: 0;
	padding: 0 98upx;
	button {
		border: none;
		width: 100%;
		border-radius: 44upx;
		background-color: #ffb423;
		color: #ffffff;
		font-size: 32upx;
	}
	button:after {
		border: none;
		outline: none;
	}
}
</style>
